<template>
  <view class="m-list-item">
    <view v-if="statusTag" :class="statusTag.type === 'success' ? 'm-list-item--success' : 'm-list-item--warning'">{{ statusTag.value }}</view>
    <view @click="listClick(props.config)" class="w100">
      <template v-for="(row, index) in props.config" :key="index">
        <view class="f row">
          <slot v-if="!Number(index)" />
          <view class="f row m-list-item__row" v-if="!Object.keys(row.children).includes('_data')">
            <template v-for="(i, k) in row.children" :key="k">
              <view class="m-list-item__item" :style="custom(i)" :class="{ padNoleft: props.checkMode && !Number(index) }">
                <view class="m-list-item__item--label" v-if="i.t">{{ i.t }}</view>
                <view class="m-list-item__item--control" v-if="!i.hidden">
                  <m-control :config="i" :value="i.value" :_data="_data" @btnClick="btnClick" />
                </view>
              </view>
            </template>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { reverseList } from '../../../mo-form/utils/tools';
onMounted(() => emit('mounted', props.index));
const props = defineProps({ config: Object, index: Number, checkMode: Boolean });
const custom = computed(() => {
  return (e: any) => {
    const { custom = {} } = e;
    return custom;
  };
});
// 每次_data 都在最后,故采取后序遍历
const findData = computed(() => props.config?.find((e: any) => '_data' in e.children)?.children._data.value);
const statusTag = computed(() => findData.value?.status);
const _data = findData;
const emit = defineEmits(['listClick', 'btnClick', 'mounted']);
const listClick = (e: any) => {
  emit('listClick', reverseList(e));
};

function btnClick(e: any) {
  emit('btnClick', e);
}
</script>
<style lang="scss">
@import '@/styles/common.scss';
.padNoleft {
  padding-left: 0 !important;
}
.m-list-item {
  @extend .card;
  display: flex;
  flex-direction: row;
  font-size: 30rpx;
  padding: 6rpx 0 20rpx 0;
  position: relative;
  &--success {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 140rpx;
    height: 52rpx;
    line-height: 52rpx;
    background: linear-gradient(to right, #35aeff, #1876ff);
    border-radius: 0rpx 16rpx 0rpx 16rpx;
    text-align: center;
    color: #ffffff;
    font-size: 26rpx;
    letter-spacing: 2rpx;
  }
  &--warning {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 140rpx;
    height: 52rpx;
    line-height: 52rpx;
    background: linear-gradient(to right, #ff9c55, #ed6a0c);
    border-radius: 0rpx 16rpx 0rpx 16rpx;
    text-align: center;
    color: #ffffff;
    font-size: 26rpx;
    letter-spacing: 2rpx;
  }
  &__row {
    width: 100%;
    padding: 4rpx 0rpx;
  }
  &__item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 20rpx;
    width: 100%;
    &--label {
      white-space: nowrap;
      color: #666666;
    }
    &--control {
      border: none !important;
      font-weight: normal;
    }
  }
}
</style>
